<!doctype html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>博客列表页</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body {
            background-color: #f3f3f3;
        }
        .container{
            width: 90%;
            margin: 0 auto;
            background-color: antiquewhite;
        }
        .title{
            display: block;
            text-align: center;
            color: black;
            font-size: 20px;
            font-weight: 700;
            text-decoration: none;
            padding: 10px 0;
        }
        .post-time{
            text-align: center;
            color: #999aaa;
        }
        .desc{
            padding-bottom: 10px;
            text-indent: 20px;
        }
        .nav{
            height: 50px;
            background: black;
            color: #fff;
            display: flex;
            align-items: center;   /*垂直居中*/
        }
        .nav-button{
            color: #f3f3f3;
            text-decoration: none;  /*去掉下划线*/
            padding: 0 10px;  /*第一个参数表示上下，第二个参数表示左右*/
        }
        .spacer {
            width: 65%;
        }
        .nav-title{
            padding: 0 15px;
        }
        .spacer2 {
            width: 3%;
        }
    </style>
</head>
<body>
<!--  导航栏  -->
<div class="nav">
    <!--  如果用户未登录，显示未登录，并且显示登陆/注册按钮  -->
    <!--  如果用户登录，显示欢迎 xxx  -->
    <h3 class="nav-title">我的博客系统</h3>
    <div class="spacer"></div>
    <a href="login.html" class="nav-button" th:if="${!isLogin}">登录</a>
    <a href="register.html" class="nav-button" th:if="${!isLogin}">注册</a>
    <div th:if="${isLogin}" th:text="${'欢迎' + user.username + '登录博客'}"></div>
    <div class="spacer2"></div>
    <a href="blog_edit.html" class="nav-button" th:if="${isLogin}">写博客</a>
    <a href="logout" th:if="${isLogin}" class="nav-button">注销</a>
</div>


<!-- .container 存放了所有的博客 -->
<div class="container">
    <!-- .blog 对应一篇博客 -->
    <div class="blog" th:each="blog : ${list}">
        <a th:href="${'blogContent?blogId=' + blog.blogId}" class="title" th:text="${blog.title}">我是标题</a>
        <div class="post-time" th:text="${blog.postTime}">2021-07-21 18:48:00</div>
        <div class="desc" th:text="${blog.content}">我是正文的摘要...</div>
    </div>
</div>
</body>
</html>